import React, { useState } from 'react';
import styles from './index.module.scss';

const View:React.FC = () => {
  const [leftWidth, setLeftWidth] = useState(200);
  const [isDragging, setIsDragging] = useState(false);

  const handleMouseDown = (e: React.MouseEvent) => {
    e.preventDefault(); // 防止拖动时出现选择文本的问题
    setIsDragging(true);
    const startX = e.clientX;
    const startWidth = leftWidth;

    const handleMouseMove = (e: MouseEvent) => {
      const newWidth = startWidth + (e.clientX - startX);
      setLeftWidth(newWidth);
    };

    const handleMouseUp = () => {
      setIsDragging(false);
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };

    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  };

  return (
    <div className={styles.container}>
      <div className={styles.leftPane} style={{ width: leftWidth }}>
        Left Pane
      </div>
      <div
        className={`${styles.splitter} ${isDragging ? styles.dragging : ''}`}
        onMouseDown={handleMouseDown}
      >
        <div className={styles.splitterHandle} />
      </div>
      <div className={styles.rightPane}>
        Right Pane
      </div>
    </div>
  );
};

export default View;
